<template>
	<view class="content">
		<text class="title">停车场列表</text>
		<view class="park_list">
			<view class="park_item" v-for="(item,index) in data_arr" v-show="isMore||index<6" @click="go_detail(item.parkName)">
				<view class="parkName">{{item.parkName}}</view>
				<view class="parkInfo">
					<view>空位数量:{{item.vacancy}}</view>
					<view>收费价格:每小时{{item.rates}}元</view>
					<view>距离:{{item.distance}}米</view>
				</view>
				<view class="address">地址:{{item.address}}</view>
			</view>
			<button style="margin-top: 30rpx;" type="primary" @click="isMore=true" v-show="!isMore">查看更多</button>
		</view>
	</view>
</template>

<script>
	import {http} from "../../utils/request.js"
	export default {
		data() {
			return {
				host: uni.getStorageSync("BASE_URL"),
				data_arr:[],
				isMore:false
			}
		},
		created() {
			http({
				url:"/prod-api/api/park/lot/list"
			}).then((res)=>{
				this.data_arr=res.data.rows.sort((a,b)=>{
					return a.distance-b.distance
				})
				this.$forceUpdate()
			})
			
		},
		methods: {
			go_detail(parkName){
				uni.navigateTo({
					url:"/pages/park/park_detail?parkName="+parkName
				})
			},
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"../../pages/park/park_record"
			})
		}
	}
</script>

<style>
	.content {
		width: 95%;
		margin: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.content .title {
		text-align: center;
		font-size: 45rpx;
		font-weight: bolder;
	}
	.park_list{
		padding: 20rpx;
		background-color: #ecf0f1;
	}
	.park_list,.park_item{
		display: flex;
		flex-direction: column;
	}
	.park_item{
		text-align: center;
		background-color: #bdc3c7;
		border-radius: 5px;
	}
	.park_item+.park_item{
		margin-top: 40rpx;
	}
	.parkInfo{
		display: flex;
		flex-wrap: wrap;
	}
	.parkInfo>*{
		width: 50%;
	}
	.parkName,.address{
		min-width: 100%;
	}
	.parkName{
		font-size: 45rpx;
		font-weight: border;
	}
</style>
